<template>
  <div>
    <h1>ChildView</h1>
    <p>title: {{ title }}</p>
    <p>msg: {{ msg }}</p>
    <p>uname: {{ uname }}</p>
    <button type="button" @click="moifyTitle">moifytitle</button>
    <hr />
    <button type="button" @click="goAbout">go about</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { defineProps, defineEmits } from 'vue'

const router = useRouter() // $router
const goAbout = () => {
  // this.$router.push('/about')
  router.push({ path: '/about', query: { id: 11 } })
}

const props = defineProps({
  title: String,
  msg: String,
  uname: String
})

const emit = defineEmits(['myclick'])
// 要先把props展开为一个新对象，再解构赋值。
const { title, msg } = { ...props }

// console.log(title)
// console.log(msg)
// let str = ref('hello kity')
const moifyTitle = () => {
  // this.$emit('myclick', str) // vue2
  emit('myclick', 'hello kity')
  // 如果父组件的PROPS绑定的值是ref()对象，emit()回去修改对象时，可以改父组件的变量。但是改变后，子组件里面没有响应式渲染。
  // 解决方法： ref()替换为reactive（）；
}
</script>

<style></style>
